<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue element-ui 换肤功能开发 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.6e09c0e4.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/44.fc4d4540.js" as="script"><link rel="prefetch" href="/assets/js/10.29078de5.js"><link rel="prefetch" href="/assets/js/100.1775343f.js"><link rel="prefetch" href="/assets/js/101.03c2a233.js"><link rel="prefetch" href="/assets/js/102.2d566277.js"><link rel="prefetch" href="/assets/js/103.28f0aae6.js"><link rel="prefetch" href="/assets/js/104.98d074e6.js"><link rel="prefetch" href="/assets/js/105.a113c54b.js"><link rel="prefetch" href="/assets/js/106.fe975924.js"><link rel="prefetch" href="/assets/js/107.06b48459.js"><link rel="prefetch" href="/assets/js/108.650cfa65.js"><link rel="prefetch" href="/assets/js/109.8dea05a5.js"><link rel="prefetch" href="/assets/js/11.0ffc15c2.js"><link rel="prefetch" href="/assets/js/110.f426e949.js"><link rel="prefetch" href="/assets/js/111.cb0ff462.js"><link rel="prefetch" href="/assets/js/112.2234a7ce.js"><link rel="prefetch" href="/assets/js/113.d42a4afb.js"><link rel="prefetch" href="/assets/js/114.afa6c93d.js"><link rel="prefetch" href="/assets/js/115.e74e58c4.js"><link rel="prefetch" href="/assets/js/116.b52912dc.js"><link rel="prefetch" href="/assets/js/117.f5e176df.js"><link rel="prefetch" href="/assets/js/118.428fdb24.js"><link rel="prefetch" href="/assets/js/119.c7b3c702.js"><link rel="prefetch" href="/assets/js/12.5358dc27.js"><link rel="prefetch" href="/assets/js/120.b28cb8e3.js"><link rel="prefetch" href="/assets/js/121.517216d1.js"><link rel="prefetch" href="/assets/js/122.224b318f.js"><link rel="prefetch" href="/assets/js/123.04e6a56c.js"><link rel="prefetch" href="/assets/js/13.1eb6db46.js"><link rel="prefetch" href="/assets/js/14.2d919975.js"><link rel="prefetch" href="/assets/js/15.351e3a4c.js"><link rel="prefetch" href="/assets/js/16.3acd2d41.js"><link rel="prefetch" href="/assets/js/17.60b03995.js"><link rel="prefetch" href="/assets/js/18.c6ad362d.js"><link rel="prefetch" href="/assets/js/19.8ab677ff.js"><link rel="prefetch" href="/assets/js/20.99f99fea.js"><link rel="prefetch" href="/assets/js/21.c1d6f733.js"><link rel="prefetch" href="/assets/js/22.6f0b0c91.js"><link rel="prefetch" href="/assets/js/23.13368cdd.js"><link rel="prefetch" href="/assets/js/24.c53a9ca6.js"><link rel="prefetch" href="/assets/js/25.cd4407c5.js"><link rel="prefetch" href="/assets/js/26.d9b2ef17.js"><link rel="prefetch" href="/assets/js/27.16352eff.js"><link rel="prefetch" href="/assets/js/28.a62c7d25.js"><link rel="prefetch" href="/assets/js/29.635009f5.js"><link rel="prefetch" href="/assets/js/3.72d46b47.js"><link rel="prefetch" href="/assets/js/30.db885055.js"><link rel="prefetch" href="/assets/js/31.aa8c6cb9.js"><link rel="prefetch" href="/assets/js/32.e63d710c.js"><link rel="prefetch" href="/assets/js/33.4f69bb69.js"><link rel="prefetch" href="/assets/js/34.9d242b1d.js"><link rel="prefetch" href="/assets/js/35.24c7045d.js"><link rel="prefetch" href="/assets/js/36.2988cd72.js"><link rel="prefetch" href="/assets/js/37.05bf63d5.js"><link rel="prefetch" href="/assets/js/38.ecef1ea2.js"><link rel="prefetch" href="/assets/js/39.0fde8ff2.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.99489203.js"><link rel="prefetch" href="/assets/js/41.928918ed.js"><link rel="prefetch" href="/assets/js/42.8ff04c77.js"><link rel="prefetch" href="/assets/js/43.347198e5.js"><link rel="prefetch" href="/assets/js/45.5e4eff92.js"><link rel="prefetch" href="/assets/js/46.83a0c228.js"><link rel="prefetch" href="/assets/js/47.37c2f407.js"><link rel="prefetch" href="/assets/js/48.bada4ddc.js"><link rel="prefetch" href="/assets/js/49.562d8b65.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.338be56f.js"><link rel="prefetch" href="/assets/js/51.999e3de3.js"><link rel="prefetch" href="/assets/js/52.11309761.js"><link rel="prefetch" href="/assets/js/53.ea6a0c8a.js"><link rel="prefetch" href="/assets/js/54.a49ee06c.js"><link rel="prefetch" href="/assets/js/55.d4d985f2.js"><link rel="prefetch" href="/assets/js/56.258972e6.js"><link rel="prefetch" href="/assets/js/57.e7d3b5af.js"><link rel="prefetch" href="/assets/js/58.50c14a49.js"><link rel="prefetch" href="/assets/js/59.8edb599b.js"><link rel="prefetch" href="/assets/js/6.ba658368.js"><link rel="prefetch" href="/assets/js/60.d1250584.js"><link rel="prefetch" href="/assets/js/61.28187287.js"><link rel="prefetch" href="/assets/js/62.1cb42759.js"><link rel="prefetch" href="/assets/js/63.3fd80d10.js"><link rel="prefetch" href="/assets/js/64.9f43af49.js"><link rel="prefetch" href="/assets/js/65.c4a47594.js"><link rel="prefetch" href="/assets/js/66.cd22b5d7.js"><link rel="prefetch" href="/assets/js/67.5c9918c9.js"><link rel="prefetch" href="/assets/js/68.fb876377.js"><link rel="prefetch" href="/assets/js/69.3414f481.js"><link rel="prefetch" href="/assets/js/7.83e78719.js"><link rel="prefetch" href="/assets/js/70.f003a000.js"><link rel="prefetch" href="/assets/js/71.39859d24.js"><link rel="prefetch" href="/assets/js/72.12912986.js"><link rel="prefetch" href="/assets/js/73.abd327ea.js"><link rel="prefetch" href="/assets/js/74.36cb7d1d.js"><link rel="prefetch" href="/assets/js/75.1cb96b9a.js"><link rel="prefetch" href="/assets/js/76.6033c6da.js"><link rel="prefetch" href="/assets/js/77.083624e2.js"><link rel="prefetch" href="/assets/js/78.70d3273c.js"><link rel="prefetch" href="/assets/js/79.14f3aecd.js"><link rel="prefetch" href="/assets/js/8.bcb11f96.js"><link rel="prefetch" href="/assets/js/80.95205bda.js"><link rel="prefetch" href="/assets/js/81.a39e63f0.js"><link rel="prefetch" href="/assets/js/82.6298e8dc.js"><link rel="prefetch" href="/assets/js/83.109c5547.js"><link rel="prefetch" href="/assets/js/84.6a1959a1.js"><link rel="prefetch" href="/assets/js/85.6ff6f61a.js"><link rel="prefetch" href="/assets/js/86.7d2bfbe7.js"><link rel="prefetch" href="/assets/js/87.2032d6ae.js"><link rel="prefetch" href="/assets/js/88.5cda9aa6.js"><link rel="prefetch" href="/assets/js/89.60c9e091.js"><link rel="prefetch" href="/assets/js/9.170a94b1.js"><link rel="prefetch" href="/assets/js/90.0dab9f57.js"><link rel="prefetch" href="/assets/js/91.ecf75d5a.js"><link rel="prefetch" href="/assets/js/92.74397fcb.js"><link rel="prefetch" href="/assets/js/93.f5559b26.js"><link rel="prefetch" href="/assets/js/94.27c65783.js"><link rel="prefetch" href="/assets/js/95.ea55ba1f.js"><link rel="prefetch" href="/assets/js/96.8a68510f.js"><link rel="prefetch" href="/assets/js/97.ef520b02.js"><link rel="prefetch" href="/assets/js/98.d4a41570.js"><link rel="prefetch" href="/assets/js/99.bdd726ad.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Vue</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/d36e75/" class="sidebar-link">持久化存储实时读取</a></li><li><a href="/pages/e3bb47/" class="sidebar-link">vue自适应布局</a></li><li><a href="/pages/3de341/" class="sidebar-link">Vue 中后台表格的增删改查同一解决方案(组件封装版)</a></li><li><a href="/pages/b97f0c/" class="sidebar-link">Vue Render自定义table单元格内容</a></li><li><a href="/pages/479249/" class="sidebar-link">项目初始化编码规范(eslint,prettier等)</a></li><li><a href="/pages/037c03/" aria-current="page" class="active sidebar-link">vue element-ui 换肤功能开发</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/037c03/#实现原理" class="sidebar-link">实现原理</a></li><li class="sidebar-sub-header"><a href="/pages/037c03/#开始实现" class="sidebar-link">开始实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/037c03/#问题" class="sidebar-link">问题</a></li></ul></li></ul></li><li><a href="/pages/5ae239/" class="sidebar-link">vue element 定义多种主题实现换肤</a></li><li><a href="/pages/66e402/" class="sidebar-link">大屏自适应容器</a></li><li><a href="/pages/cb8f80/" class="sidebar-link">el-upload 自定义上传进度</a></li><li><a href="/pages/a00f46/" class="sidebar-link">vue3初学注意点</a></li><li><a href="/pages/66bb43/" class="sidebar-link">vue3 hooks 自适应可视化大屏</a></li><li><a href="/pages/b533ef/" class="sidebar-link">vue3 element-plus ant- design 自定义主题</a></li><li><a href="/pages/e3d23f/" class="sidebar-link">vue2中使用jsx</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#Vue" data-v-0c557b5e>Vue</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2021-12-30</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">vue element-ui 换肤功能开发<!----></h1> <!----> <div class="theme-vdoing-content content__default"><p>此功能基于</p> <blockquote><p>vue 2.6</p> <p>element-ui 2.13.2</p></blockquote> <p>实现</p> <p>快速切换主题 使用命令行主题工具进行深层次的主题定制</p> <h2 id="实现原理"><a href="#实现原理" class="header-anchor">#</a> 实现原理</h2> <ul><li>主题的css通过<code>public/index.html</code>中的link标签中引入</li> <li>切换事件中就切换link标签中的css地址即可
<ul><li>避免加载缓慢的问题，提前构建好主题css文件，放置在<code>src/assets</code>或者<code>public</code>文件夹下</li></ul></li> <li>结果：</li></ul> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/014020.vue%20element-ui%20%E6%8D%A2%E8%82%A4%E5%8A%9F%E8%83%BD%E5%BC%80%E5%8F%91/2022/01/12/16-51-10-1501f8fd057642eb9855ce6c4488ff35-image-20220112165109453-5580b9.png" alt="image-20220112165109453"></p> <h2 id="开始实现"><a href="#开始实现" class="header-anchor">#</a> 开始实现</h2> <p>使用官方的深度主题构建工具<a href="https://github.com/ElementUI/element-theme" target="_blank" rel="noopener noreferrer">element-theme<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ul><li><p>克隆仓库 <code>git clone https://github.com/ElementUI/element-theme.git</code></p></li> <li><p>node版本切换到10;   我用的10.24.1</p></li> <li><p>安装好依赖 <code>npm i</code></p></li> <li><p>安装主题包 <code>npm i element-theme -D</code></p></li> <li><p>增加npm脚本</p> <ul><li><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    ...
    <span class="token property">&quot;et&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node_modules/.bin/et&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;et:init&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node_modules/.bin/et -i&quot;</span><span class="token punctuation">,</span>
   	...
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></li></ul></li> <li><p>初始化变量文件</p> <ul><li><code>npm run et:init</code></li></ul> <p>就可以看到多出一个 element-variables.css的文件</p></li> <li><p>然后只需要调整好几个颜色变量即可，<a href="https://element.eleme.cn/#/zh-CN/theme" target="_blank" rel="noopener noreferrer">使用官方在线构建<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>更准确如果是暗黑模式，就需要把颜色反过来。如</p> <ul><li><p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/014020.vue%20element-ui%20%E6%8D%A2%E8%82%A4%E5%8A%9F%E8%83%BD%E5%BC%80%E5%8F%91/2022/01/12/13-56-08-4246a53186d4934c20070cb368c773b2-image-20220112135601646-302e1e.png" alt="image-20220112135601646"></p></li> <li><p>然后下载，把其中的json文件中颜色值替换到element-variables.css</p></li> <li><div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token comment">/* Color
-------------------------- */</span>
<span class="token comment">/// color|1|Brand Color|0</span>
<span class="token property"><span class="token variable">$--color-primary</span></span><span class="token punctuation">:</span> #50D6FF <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Background Color|4</span>
<span class="token property"><span class="token variable">$--color-white</span></span><span class="token punctuation">:</span> #121B33 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Background Color|4</span>
<span class="token property"><span class="token variable">$--color-black</span></span><span class="token punctuation">:</span> #243666 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-primary-light-1</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 10%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* 53a8ff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-2</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 20%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* 66b1ff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-3</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 30%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* 79bbff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-4</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 40%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* 8cc5ff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-5</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 50%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* a0cfff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-6</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 60%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* b3d8ff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-7</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 70%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* c6e2ff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-8</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 80%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* d9ecff */</span>
<span class="token property"><span class="token variable">$--color-primary-light-9</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-primary</span><span class="token punctuation">,</span> 90%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span> <span class="token comment">/* ecf5ff */</span>
<span class="token comment">/// color|1|Functional Color|1</span>
<span class="token property"><span class="token variable">$--color-success</span></span><span class="token punctuation">:</span> #16EE9F <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Functional Color|1</span>
<span class="token property"><span class="token variable">$--color-warning</span></span><span class="token punctuation">:</span> #F7D230 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Functional Color|1</span>
<span class="token property"><span class="token variable">$--color-danger</span></span><span class="token punctuation">:</span> #FE5858 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Functional Color|1</span>
<span class="token property"><span class="token variable">$--color-info</span></span><span class="token punctuation">:</span> #B2BFD9 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>

<span class="token property"><span class="token variable">$--color-success-light</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-success</span><span class="token punctuation">,</span> 80%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-warning-light</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-warning</span><span class="token punctuation">,</span> 80%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-danger-light</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-danger</span><span class="token punctuation">,</span> 80%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-info-light</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-info</span><span class="token punctuation">,</span> 80%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>

<span class="token property"><span class="token variable">$--color-success-lighter</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-success</span><span class="token punctuation">,</span> 90%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-warning-lighter</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-warning</span><span class="token punctuation">,</span> 90%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-danger-lighter</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-danger</span><span class="token punctuation">,</span> 90%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$--color-info-lighter</span></span><span class="token punctuation">:</span> <span class="token function">mix</span><span class="token punctuation">(</span><span class="token variable">$--color-white</span><span class="token punctuation">,</span> <span class="token variable">$--color-info</span><span class="token punctuation">,</span> 90%<span class="token punctuation">)</span> <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Font Color|2</span>
<span class="token property"><span class="token variable">$--color-text-primary</span></span><span class="token punctuation">:</span> #DEE7FF <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Font Color|2</span>
<span class="token property"><span class="token variable">$--color-text-regular</span></span><span class="token punctuation">:</span> #BED0FF <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Font Color|2</span>
<span class="token property"><span class="token variable">$--color-text-secondary</span></span><span class="token punctuation">:</span> #919AB3 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Font Color|2</span>
<span class="token property"><span class="token variable">$--color-text-placeholder</span></span><span class="token punctuation">:</span> #8091BE <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Border Color|3</span>
<span class="token property"><span class="token variable">$--border-color-base</span></span><span class="token punctuation">:</span> #414D6E <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Border Color|3</span>
<span class="token property"><span class="token variable">$--border-color-light</span></span><span class="token punctuation">:</span> #4E5C7F <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Border Color|3</span>
<span class="token property"><span class="token variable">$--border-color-lighter</span></span><span class="token punctuation">:</span> #EBEEF5 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
<span class="token comment">/// color|1|Border Color|3</span>
<span class="token property"><span class="token variable">$--border-color-extra-light</span></span><span class="token punctuation">:</span> #647092 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>

<span class="token comment">// Background</span>
<span class="token comment">/// color|1|Background Color|4</span>
<span class="token property"><span class="token variable">$--background-color-base</span></span><span class="token punctuation">:</span> #243666 <span class="token statement keyword">!default</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br></div></div></li></ul></li> <li><p>然后就是构建主题包了 <code>npm run et</code></p></li></ul> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/014020.vue%20element-ui%20%E6%8D%A2%E8%82%A4%E5%8A%9F%E8%83%BD%E5%BC%80%E5%8F%91/2021/12/31/14-33-29-840e8a7316157b438fc2342415e2cc38-element-4e1dee.gif" alt="element"></p> <ul><li><p>构建完成后把包放到 <code>public/theme/[名称]</code> 下面</p></li> <li><p>最后用函数去手动引入就好了</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">themeColorChangeHandle</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> styleList <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          id<span class="token operator">:</span> <span class="token string">'J_elementTheme'</span><span class="token punctuation">,</span>
          url<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">element-theme/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>val<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/index.css?t=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> styleList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">#</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>el<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          el<span class="token punctuation">.</span>href <span class="token operator">=</span> styleList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>url
          <span class="token keyword">continue</span>
        <span class="token punctuation">}</span>
        el <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'link'</span><span class="token punctuation">)</span>
        el<span class="token punctuation">.</span>id <span class="token operator">=</span> styleList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>id
        el<span class="token punctuation">.</span>href <span class="token operator">=</span> styleList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>url
        el<span class="token punctuation">.</span>rel <span class="token operator">=</span> <span class="token string">'stylesheet'</span>
        document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h3 id="问题"><a href="#问题" class="header-anchor">#</a> 问题</h3></li> <li><p>出错：ReferenceError: primordials is not defined</p> <ul><li><p>node版本过高， 降级node到10就差不多了</p></li> <li><p>（不想降级node可使用这个方案）</p> <ul><li><p>根目录下新建<code>npm-shrinkwrap.json</code>, 其内容如下</p></li> <li><div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;graceful-fs&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;4.2.2&quot;</span>
     <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div></li></ul></li></ul></li></ul></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/01/21, 15:51:34</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/479249/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">项目初始化编码规范(eslint,prettier等)</div></a> <a href="/pages/5ae239/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">vue element 定义多种主题实现换肤</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/479249/" class="prev">项目初始化编码规范(eslint,prettier等)</a></span> <span class="next"><a href="/pages/5ae239/">vue element 定义多种主题实现换肤</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/486e07/"><div>
            Git Hooks
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/f041f4/"><div>
            标准化编程规范解决方案
            <!----></div></a> <span class="date">02-24</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2b68bd/"><div>
            git 提交信息规范
            <!----></div></a> <span class="date">02-24</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.6e09c0e4.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/44.fc4d4540.js" defer></script>
  </body>
</html>
